<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="JS/ItcastArc.js"></script>
    <script src="JS/Handline.js"></script>
    <script src="JS/Pointer.js"></script>
</head>

<body>
    <div class="back">
        <canvas class="can"></canvas>
    </div>
    <script>
        let canvas = document.querySelector('.can');
        let ctx = canvas.getContext('2d');

        canvas.width = 600;
        canvas.height = 600;


        //时钟表盘
        let arc = new ItcastArc({
            x: canvas.width / 2,
            y: canvas.height / 2,
            fillStyle: '#FFF',
            strokeStyle: '#ccc',
            startAngle: 0,
            endAngle: 360,
            r: 150
        });

        //分钟刻度线绘制
        let minuteline = new Handline({
            x: canvas.width / 2,
            y: canvas.height / 2,
            angle: -90
        });

        //小时刻度线绘制
        let hourline = new Handline({
            x: canvas.width / 2,
            y: canvas.height / 2,
            angle: -90,
            line: 135,
            strokeStyle: 'black',
        });

        //使数字12在最上边
        function num() {
            hourline.angle = -60;
            //表盘数字
            for (let i = 1; i <= 12; i++) {
                ctx.save();
                let distant = hourline.line - 10;
                //控制上面半边数字与刻度线的距离
                if ((i > 0 && i < 3) || (i > 9 && i < 13)) {
                    distant = hourline.line - 15;
                }

                ctx.translate(canvas.width / 2, canvas.height / 2);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.font = "20px'微软雅黑'";
                ctx.strokeText(i, distant * (Math.cos(hourline.angle * Math.PI / 180)), distant * (Math.sin(hourline.angle * Math.PI / 180)))
                hourline.angle += 30;
                ctx.restore();
            }
        };
        //指针中央
        let handcenter = new ItcastArc({
            x: canvas.width / 2,
            y: canvas.height / 2,
            fillStyle: '#000',
            startAngle: 0,
            endAngle: 360,
            r: 5
        });

        let date = new Date();
        let h = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();

        let h_angle = h % 12 * 30 + m / 2 + s / 6 - 90;
        let m_angle = m * 6 + s / 10 - 90;
        let s_angle = s * 6 - 90;

        let h_pointer = new Pointer({
            x: canvas.width / 2,
            y: canvas.height / 2,
            angle: h_angle,
            length: 50
        });

        let m_pointer = new Pointer({
            x: canvas.width / 2,
            y: canvas.height / 2,
            angle: m_angle,
            strokeWidth: 2,
            strokeStyle: 'green',
            length: 80
        });

        let s_pointer = new Pointer({
            x: canvas.width / 2,
            y: canvas.height / 2,
            angle: s_angle,
            strokeWidth: 1,
            strokeStyle: 'red',
            length: 100
        });

        let count = 0, interval = 1000;
        let offset = 0;//误差时间
        let nextTime = interval - offset;//原本间隔时间-误差时间
        let start = new Date().getTime();

        clock();
        setInterval(clock, interval);
        function clock() {
            count++;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            //表盘绘制
            arc.render(ctx);
            //刻度绘制
            for (let i = 1; i <= 60; i++) {
                minuteline.render(ctx);
                minuteline.angle += 6;
            };
            for (let i = 1; i <= 12; i++) {
                hourline.render(ctx);
                hourline.angle -= 30;
            }
            //表盘中央
            handcenter.render(ctx);
            //表盘数字
            num();
            //指针转动
            let date = new Date();
            let h = date.getHours();
            let m = date.getMinutes();
            let s = date.getSeconds();

            let h_angle = h % 12 * 30 + m / 2 + s / 120 - 90;
            let m_angle = m * 6 + s / 10 - 90;
            let s_angle = s * 6 - 90;

            offset = date.getTime() - (start + count * interval);
            nextTime = interval - offset;
            if (nextTime < 0) {
                nextTime = 0;
            }
            h_pointer.angle = h_angle;
            m_pointer.angle = m_angle;
            s_pointer.angle = s_angle;

            s_pointer.render(ctx);
            m_pointer.render(ctx);
            h_pointer.render(ctx);
        };


    </script>
</body>

</html>